<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>慕课手机</title>
	<link rel="stylesheet" href="./styles/base.css">
	<link rel="stylesheet" href="./styles/index.css">
</head>
<body>
	<header class="header">
		<div class="header__wrap">
			<div class="header__logo">慕课手机</div>
			<nav class="header__nav">
				<a href="javascript:;" class="header__nav-item header__nav-item_status_active">首页</a>
				<a href="javascript:;" class="header__nav-item">型号</a>
				<a href="javascript:;" class="header__nav-item">说明</a>
				<a href="javascript:;" class="header__nav-item">其他产品</a>
				<a href="javascript:;" class="header__nav-item header__nav-item_buy-button">立即购买</a>
			</nav>
		</div>
	</header>
	<div class="screen-1">
		<h2 class="screen-1__head">
			<span class="screen-1__head_active">慕课手机</span> 
			让你的生活更精彩
		</h2>
		<div class="screen-1__phone"></div>
		<div class="screen-1__shadow"></div>
	</div>
	<div class="screen-2">
		<h2 class="screen-2__head">优美的设计，更令人着迷</h2>
		<h4 class="screen-2__sub-head">采用受欢迎的设计，让它更加出色。<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h4>
		<div class="screen-2__phone">
			<div class="screen-2__point screen-2__point-1 ">高清摄像</div>
			<div class="screen-2__point screen-2__point-left screen-2__point-2">超薄机身</div>
			<div class="screen-2__point screen-2__point-left screen-2__point-3">大屏显示</div>
		</div>
	</div>
	<div class="screen-3">
		<div class="screen-3__wrap">
			<h2 class="screen-3__head">外形小巧，功能强大的手机</h2>
			<h4 class="screen-3__sub-head">采用受欢迎的设计，让它更加出色。<br> 款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h4>
			<div class="screen-3__phone"></div>
			<div class="screen-3__features">
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">5.7</div>
                        <div class="screen-3__features__item__desc">英寸大屏</div>
                    </div>
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">1200</div>
                        <div class="screen-3__features__item__desc">万像素</div>
                    </div>
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">3D</div>
                        <div class="screen-3__features__item__desc">touch</div>
                    </div>
                    <div class="screen-3__features__item">
                        <div class="screen-3__features__item__number">A9</div>
                        <div class="screen-3__features__item__desc">处理器</div>
                    </div>
                </div>
		</div>
	</div>
	<div class="screen-4">
		<div class="screen-4__wrap">
			<div class="screen-4__head">丰富的手机型号</div>
			<div class="screen-4__sub-head">找到适合你的手机</div>
			<div class="screen-4__phone-list">
				<div class="screen-4__phone-item screen-4__phone-item-1">
					<div class="screen-4__phone-item__desc">
						<div class="screen-4__phone-item-color">苹果红</div>
						<div class="screen-4__phone-item-data">32G/64G/128G</div>
					</div>
				</div>
				<div class="screen-4__phone-item screen-4__phone-item-2">
					<div class="screen-4__phone-item__desc">
						<div class="screen-4__phone-item-color">土豪金</div>
						<div class="screen-4__phone-item-data">32G/64G/128G</div>
					</div>
				</div>
				<div class="screen-4__phone-item screen-4__phone-item-3">
					<div class="screen-4__phone-item__desc">
						<div class="screen-4__phone-item-color">太空灰</div>
						<div class="screen-4__phone-item-data">32G/64G/128G</div>
					</div>
				</div>
				<div class="screen-4__phone-item screen-4__phone-item-4">
					<div class="screen-4__phone-item__desc">
						<div class="screen-4__phone-item-color">绅士黑</div>
						<div class="screen-4__phone-item-data">32G/64G/128G</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="screen-5">
		<h2 class="screen-5__head">游戏、学习、拍照、有这一部就够了</h2>
		<h4 class="screen-5__sub-head">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h4>
		<div class="screen-5__img"></div>
	</div>
	<div class="screen-buy">
		<div class="screen-buy__button">立即购买</div>
	</div>
	<footer class="footer">
        © 2016 imooc.com 京ICP备13046642号
    </footer>
</body>
</html>